<template>
  <z-paging 
    ref="pagingRef" 
    v-model="dataList" 
    @query="queryList"
    :auto-show-system-loading="false"
    :paging-enabled="false"
    :auto-show-back-to-top="false"
    :loading-more-enabled="false"
    :auto="false"
  >
    <template #top>
      <wd-navbar 
        title="强脑科技产品培训" 
        custom-class="navbar-custom" 
        :bordered="false" 
        safeAreaInsetTop
        left-arrow
        @click-left="goBack"
      ></wd-navbar>
    </template>
    <!-- 分类列表 -->
    <view 
      v-for="(item, index) in dataList" 
      :key="index"
      class="mt-[24rpx]"
    >
      <wd-row :gutter="16">
        <wd-col 
          v-for="productItem in item" 
          :key="productItem.id"
          :span="8"
        >
          <!-- 产品 -->
          <view 
            class="bg-white rounded-[16rpx] p-[16rpx] mb-[24rpx] box-border shadow-[2rpx_0rpx_4rpx_0rpx_#000000] relative overflow-hidden"
            :style="{ 'border': productItem.complete ? '4rpx solid #83eb91' : '4rpx solid transparent' }"
            style="min-height: 350rpx;"
            @click="handleProductClick(productItem)"
          >
            <!-- 已完成角标 -->
            <image 
              v-if="productItem.complete"
              src="/src/static/images/success2.png" 
              class="w-[72rpx] h-[48rpx] absolute top-[-2rpx] right-[-2rpx] z-10"
            ></image>
            
            <!-- 内容区域 -->
            <view class="relative z-2" style="width: 100%;">
              <!-- 标签 -->
              <view class="flex flex-col gap-[8rpx] mb-[12rpx] h-[90rpx]">
                <view 
                  v-for="tag in productItem?.tag?.split(',') || []" 
                  :key="tag"
                  class="text-[24rpx] text-white px-[12rpx] py-[4rpx] rounded-[20rpx] self-start"
                  :class="['bg-green-500', 'bg-blue-500', 'bg-red-500', 'bg-yellow-500', 'bg-purple-500'][index] || 'bg-green-500'"
                >
                  {{ tag }}
                </view>
              </view>
              <!-- 产品图片 -->
              <view 
                class="w-full flex items-center justify-center mb-[12rpx] rounded-[8rpx]"
                style="width: 100%; max-height: 144rpx;"
              >
                <image 
                  :src="baseUrl + productItem.icon" 
                  mode="widthFix"
                  style="width: 100%"
                ></image>
              </view>
              <!-- 产品名称 -->
              <view 
                class="text-[32rpx] text-[#282828] text-left font-400 line-clamp-2" 
                style="line-height: 1.5; height: 96rpx;"
              >
                {{ productItem.title }}
              </view>
              <!-- 状态 -->
               <view class="text-[28rpx] text-[#666666] text-left leading-[36rpx]">
                <text v-if="productItem.complete">学习已完成</text>
                <text v-else-if="!productItem.complete && productItem.progress == 0">开始学习吧！</text>
                <text v-else-if="!productItem.complete && productItem.progress > 0">进行中</text>
               </view>
            </view>
          </view>
        </wd-col>
        <wd-col :span="24" v-if="index<dataList.length-1">
          <wd-divider style="padding: 0;color: #dedede; margin: 14rpx 0"></wd-divider>
        </wd-col>
      </wd-row>
    </view>
    <wd-row v-if="showBottom" :gutter="16">
      <wd-col :span="24">
        <wd-divider style="padding: 0;color: #e0e0e0; margin: 16rpx 0"></wd-divider>
      </wd-col>
      <wd-col :span="24" class="mt-[24rpx]">
        <view class="flex justify-between">
          <view 
          class="w-[336rpx] h-[224rpx] rounded-[16rpx] relative overflow-hidden text-center"
          @click="handleToPage(1)"
          >
            <image src="/src/static/images/bg8.png" mode="aspectFill" class="w-full h-full absolute top-0 left-0 right-0 bottom-0" />
            <view class="relative top-[162rpx] z-10">
              <text class="text-[#282828] text-[36rpx] font-400 drop-shadow-md">专业知识库</text>
            </view>
          </view>
          <view class="w-[336rpx] h-[224rpx] rounded-[16rpx] relative overflow-hidden text-center"
          @click="handleToPage(2)"
          >
            <image src="/src/static/images/bg7.png" mode="aspectFill" class="w-full h-full absolute top-0 left-0 right-0 bottom-0" />
            <view class="relative top-[162rpx] z-10">
              <text class="text-[#282828] text-[36rpx] font-400 drop-shadow-md">产品相关</text>
            </view>
          </view>
        </view>
      </wd-col>
      <wd-col :span="24" class="mt-[32rpx]">
        <view 
          class="w-full h-[120rpx] flex items-center justify-center relative overflow-hidden rounded-[16rpx]"
          @click="handleEnterExam"
        >
          <image 
            src="/src/static/images/bg0.png" 
            mode="aspectFill" 
            class="w-full h-full absolute top-0 left-0"
          />
          <view class="flex items-center gap-[8rpx] relative z-10">
            <text class="text-[36rpx] font-400 text-[#282828] relative top-[-3rpx]">进入考核</text>
            <wd-icon name="a-chevron-rightdouble" size="24px" color="#282828"></wd-icon>
          </view>
        </view>
      </wd-col>
    </wd-row>
    <view class="h-[50rpx]"></view>
  </z-paging>
</template>

<script setup>
import { ref, nextTick } from 'vue'
import { themeList } from '@/api/study.js'
import { getEnvBaseUrl } from '@/utils'

definePage({
  style: {
    navigationStyle: 'custom',
  },
})

defineOptions({
  name: 'ProductList',
})

const pagingRef = ref(null)
const dataList = ref([])
const showBottom = ref(false) //用于让底部和数据同时显示
const baseUrl = getEnvBaseUrl()


onLoad((options) => {
})

onShow(() => {
  nextTick(() => {
    pagingRef.value.reload()
  })
})

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 跳转到专业知识库或产品相关
const handleToPage = (type) => {
  let url = ''
  if (type == 1) { // 专业知识库
    url = '/pages-children/knowStore/index'
  } else if (type == 2) { // 产品相关
    url = '/pages-children/productRelated/index'
  }
  uni.navigateTo({
    url: url
  })
}

// 点击产品卡片
const handleProductClick = (item) => {
  console.log('点击产品：', item)
  
  // 跳转到学习页面
  uni.navigateTo({
    url: `/pages-children/study/index?id=${item.id}`
  })
}

// 进入考核
const handleEnterExam = () => {
  uni.navigateTo({
    url: `/pages-children/specialTest/index`
  })
}

// 查询列表数据
const queryList = (pageNo, pageSize) => {
  themeList({
    scope: 1 //1:强脑 2:茶叶
  }).then(res => {
    let obj = {}
    res.forEach(item => {
      if (item.cate_id) {
        if (!obj[item.cate_id]) {
          obj[item.cate_id] = []
        }
        obj[item.cate_id].push(item)
      } else {
        if (!obj['default']) {
          obj['default'] = []
        }
        obj['default'].push(item)
      }
    })
    // 转换为二维数组
    let copylist = Object.values(obj)
    pagingRef.value.complete(copylist)
    showBottom.value = true
  }).catch(err => {
    pagingRef.value.complete(false)
  })
}
</script>

<style>
page{
  background-color: #F1F1F1;
}
</style>